<!DOCTYPE html>
<!-- saved from url=(0043)https://cdpn.io/TajShireen/fullpage/wvBmXVN -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  
  
<link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
<meta name="apple-mobile-web-app-title" content="CodePen">

<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">

<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">


  <title>CodePen - Clipping gif to text</title>
  <link href="./css(1)" rel="stylesheet">
  
  
  
<style>
.wrapper{
  background: #252854;
  height: 97vh;
  border-radius: 5px;
  position: relative;  
}
.text{
  flex: 0 0 100%;
  font-size: 14rem;
  font-weight: 900;
  color: #00000000;
  text-align: center;
  font-family: 'Lato', sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-bottom: 1px solid #d4d7ff;
  border-top: 1px solid #d4d7ff;
  background: url(https://media1.giphy.com/media/kLMfRZwHtzr7a/source.gif);
  background-clip: text;
  -webkit-background-clip: text;
}
  
 .text:after{
   content: attr(data-text);
   -webkit-text-stroke: 1.5px #d4d7ff;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -49%);
   background: url(https://media1.giphy.com/media/kLMfRZwHtzr7a/source.gif);
   background-clip: text;
   -webkit-background-clip: text;
   background-size: 43%;

}
</style>

  <script>
  window.console = window.console || function(t) {};
</script>

  
  
  <script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>


</head>

<body translate="no">
  <div class="wrapper">
  <div class="text" data-text="2020">2020</div>
<div>
  
  
  
  
  




 
</div></div></body></html>